<template>
  <div>
    <input type="text" v-model="q">
    <button @click="addinfor(q,'zh-CHS')">翻译</button>
    <div>{{ Translation_information }}</div>
  </div>
</template>

<script>
import axios from 'axios';

    export default {
        name: "HelloWorld",
      data(){
          return{
            q:"hello",                                                  //需要翻译的文本
            from:'en',                                               //源语言
            to:'zh-CHS',                                                 //目标语言
            appKey:'改你自己id',                                       //应用 ID
            salt:2,                                                //随机数（自己随便写个数）
            secret_key:'改你自己密钥',                                      //密钥      
            Translation_information:[]                             //有道返回的翻译结果
          }
      },
      methods:{
        addinfor:function(infors,lang){
          this.q=infors;
          this.to=lang;
          axios.get('/api?q='+this.q+'&appKey='+this.appKey+'&salt='+this.salt+'&from='+this.from+'&to='+this.to+'&sign='+this.$md5(this.appKey+this.q+this.salt+this.secret_key))
            .then((data) =>{      
              console.log(data);                      //data是有道API返回的结果对象
              console.log(data.data.translation);
              this.Translation_information=data.data.translation;
            })
            .catch(error => {
    // 请求失败的处理
    if (error.response) {
      // 服务器有响应，但状态码不是 2xx
      console.error('请求出错', error.response.status);
    } else if (error.request) {
      // 请求被发出，但没有收到响应
      console.error('没有收到响应');
    } else {
      // 设置请求时触发错误
      console.error('请求设置时出错', error.message);
    }
  });
        }
      }
    }
</script>

<style>

</style>
